<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .input-val {
            width: 200px;
            height: 32px;
            border: 1px solid #ddd;
            box-sizing: border-box;
        }
        #canvas {
            vertical-align: middle;
            box-sizing: border-box;
            border: 1px solid #ddd;
            cursor: pointer;
        }
        .btn {
            display: block;
            margin-top: 20px;
            height: 32px;
            width: 100px;
            font-size: 16px;
            color: #fff;
            background-color: #457adb;
            border: none;
            border-radius: 50px;
        }
    </style>

    <!--1.引入bootstrap样式框架；-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <!--2.引入angularJS分页样式的框架；-->
    <link rel="stylesheet" href="angularjs/pagination.css">

    <link rel="stylesheet" href="layer/theme/default/layer.css">

    <!--3.引入bootstrap中的Jquery框架；-->
    <script src="bootstrap/js/jquery.min.js"></script>
    <!--4.引入bootstrap中的Js框架；-->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/angular.js/1.7.0/angular.min.js"></script>
    <script src="https://cdn.staticfile.org/angular.js/1.7.0/angular-route.min.js"></script>

    <!--6.引入AngularJS分布的JS框架-->
    <script src="angularjs/pagination.js"></script>

    <script src="layer/layer.js"></script>

    <script src="js/mycode.js" ></script>

</head>
<body ng-app="loApp"    ng-controller="loCtrl">
<div class="" style="width: 100%">
<!--    <nav class="navbar navbar-inverse" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">购物订单系统&#45;&#45;思路界面</a>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="product.html"><span class="glyphicon glyphicon-fire"></span>商品</a></li>
                <li><a href="cart.html" ><span class="glyphicon glyphicon-shopping-cart"></span>购物车</a></li>
                <li><a href="register.html"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
                <li><a ><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
            </ul>
        </div>
    </nav>-->
    <div class="panel panel-primary">

        <div style="text-align: center">
            <h1>登录系统</h1>

        </div>


        <div class="panel-body">
            <div class="col-md-9 col-md-offset-1">
                <form  action="/wusers/users/login" method="post">

                    <div class="form-group">
                        <div class="form-horizontal">
                            <label for="yhk" class="control-label col-md-2">银行卡号</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                <input name="uname" id="yhk" ng-model="form.uname" class="form-control" placeholder="请输入用户名" maxlength="30"
                                       type="text"/><span id="yhk2"></span>
                            </div>
                        </div><br>
                        <div class="form-horizontal">
                            <label for="sfz" class="control-label col-md-2">身份证号</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                <input name="uname" id="sfz" ng-model="form.uname" class="form-control" placeholder="请输入用户名" maxlength="30"
                                       type="text"/><span id="sfz2"></span>
                            </div>
                        </div><br>
                        <div class="form-horizontal">
                            <label for="sjh" class="control-label col-md-2">手机号</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                <input name="uname" id="sjh" ng-model="form.uname" class="form-control" placeholder="请输入用户名" maxlength="30"
                                       type="text"/><span id="sjh2"></span>
                            </div>
                        </div>

                        <br>
                        <div class="form-horizontal">
                            <label for="upwd" class="control-label col-md-2">密码</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input name="upwd" id="upwd" ng-model="form.upwd" class="form-control" placeholder="请输入密码" maxlength="30"
                                       type="password"><span id="mm1"></span>
                            </div>
                        </div><br>
                        <div class="form-horizontal">
                            <label for="yzm" class="control-label col-md-2">验证码</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input type="text"id="yzm" value="" class="form-control" placeholder="请输入验证码（不区分大小写）" class="input-val" style="width: 80%">&nbsp;&nbsp;&nbsp;
                                <canvas id="canvas" width="100" height="30"></canvas><span id="yzm2"></span>
                            </div>
                        </div><br>
                        <div class="form-horizontal">
                            <label for="sjyzm" class="control-label col-md-2">手机验证码</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input name="upwd" id="sjyzm" ng-model="form.upwd" class="form-control" placeholder="请输入密码" maxlength="30"
                                       type="password"><span id="sjyzm2"></span>
                            </div>
                        </div>


                        <br>
                        <div class="form-group">
                            <div class="form-group">
                                <input class="btn btn-primary col-sm-offset-2 col-md-6" id="submit"
                                  ng-click="login()"     value="立&nbsp;&nbsp;即&nbsp;&nbsp;登&nbsp;&nbsp;录" type="submit">
                            </div>
                            <div class="form-group">
                                <a class="btn btn-warning col-sm-offset-2 col-md-2" id="submit1"
                            ng-click="se(this)" type="button">注册</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="panel-footer text-right">
            订单新系统
        </div>

    </div>

</div>

<script>
    layerindex=-1;
    var app = angular.module('loApp',['pagination','ngRoute']);    //定义一个模块； cityApp
    app.constant('uid', "");
    app.controller("loCtrl",function ($scope, $http) {    //定义一个控制器； cityCtrl  ,  $http 调用接口！  http://localhost:8080/citys/list.action
        $scope.id=0;

        $scope.form={
            uname:"",
            upwd:""
        }
        $scope.se=function () {
            console.log("-----")
        }
        var sessionStorage = window.sessionStorage;
        $scope.login=function () {
            //layerindex = layer.load(1);  //1：代表动画加载；！！！！
            //JSON.stringify($scocpe.form)
            $http.post("/wusers/users/login",$.param({uname: $scope.form.uname, upwd: $scope.form.upwd}),
                {headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}}
            ).success(function (data) {
                if(data.code==200){
                    console.log(data.msg)
                    console.log(data)
                    for (var key in data.data) {
                        //键值对------console.log(key + ":" + data.data[key])
                        window.sessionStorage.setItem("uid",data.data[key].uid)
                        window.sessionStorage.setItem("token",key)
                    }
                    //$scope.setItem("uname",$scope.form.uname);
                    //localStorage.setItem("uid",json);
                    layer.close(layerindex);
                    layer.msg("登录成功",{icon:6,title:"系统提示："});
                    window.location.href="/product.html";
                }else{
                    console.log(data.msg);
                }
            })
        }
    });

    $(function () {

        $("#uname").blur(function () {

            var name = $("#uname").val();
            //console.log(s)
            if (name == null || name == "") {
                $("#yhm")[0].innerHTML = "<span style='color:red;font-size:14px;'>用户名不能为空！</span>";

                $("#uname").css("border", "2px red solid");

                $("#uname").focus()
                $("#submit").attr("disabled",true);
                return false;
            } else {
                $("#yhm")[0].innerHTML =""
                $("#submit").attr("disabled",false);
                $("#uname").css("border", "none");
                return true;
            }
        })

        $("#upwd").blur(function () {
            var pwd=$("#upwd").val();

            if(pwd==null||pwd==""){
                $("#mm")[0].innerHTML="<span style='color:red;font-size:14px;'>密码不能为空！</span>";

                $("#upwd").css("border","2px red solid");
                $("#upwd").focus()
                $("#submit").attr("disabled",true);
                return false;
            }else{
                //$("#mm")[0].innerHTML =""
                $("#submit").attr("disabled",false);
                $("#upwd").css("border","none");
                return true;
            }

        })

        var show_num = [];
        draw(show_num);
        $("#canvas").on('click',function(){
            draw(show_num);
        })
        $("#yzm").change(function () {
            var val = $("#yzm").val().toLowerCase();

            var num = show_num.join("");
            if (val == '') {
                alert('请输入验证码！');
            } else if (val == num) {
                $("#yzm").css("border", "1px green solid");
                $("#yzm").blur();
                $("#submit").attr("disabled",false);
                //$(".input-val").val('');
                // draw(show_num);
            } else {
                $("#yzm").css("border", "2px red solid");
                $(".input-val").val('');
                $("#submit").attr("disabled",true);
                $("#yzm").focus();
                // draw(show_num);
            }

        })

    });

/*    //分页加载股票信息
    var index = -1;
    $scope.loadStockList = function () {
        index = layer.load();
        $http.get("http://localhost:12000/stock/list?page=" + $scope.page.currentPage + "&pageSize=" + $scope.page.itemsPerPage, {
            headers: {token: localStorage.getItem("token")}
        }).success(function (data) {
            if (data.code == 200) {
                $scope.page.totalItems = data.data.total;
                $scope.slist = data.data.list;
                layer.close(index);
            }
            if (data.code == 403) {
                window.location.href = "/views/user/login.html";
            }
        });
    };*/

</script>
</body>
</html>